<div class="account-profile-follow {shown ? 'shown' : ''}">
  <!--
    This button has a few different states.
     - If we're blocking, then it's a normal non-toggle button that unblocks.
     - Otherwise it's a pseudo-toggle button that changes whether we're following the account or not.
     - If a follow is requested, then the button is pressed but shows as "follow requested" with
       a different icon.
  -->
  <IconButton
    className="account-profile-follow-icon-button"
    {label}
    {pressedLabel}
    {href}
    {pressable}
    {pressed}
    big={!$isVeryTinyMobileSize}
    on:click="onFollowButtonClick(event)"
    ref:icon
  />
</div>
<style>
  .account-profile-follow {
    grid-area: follow;
    align-self: flex-start;
    display: none;
  }
  .account-profile-follow.shown {
    display: block;
  }

  @media (max-width: 240px) {
    .account-profile-follow {
      justify-self: flex-end;
    }
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { FOLLOW_BUTTON_ANIMATION } from '../../_static/animations.js'
  import { store } from '../../_store/store.js'
  import { setAccountFollowed } from '../../_actions/follow.js'
  import { setAccountBlocked } from '../../_actions/block.js'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    methods: {
      oncreate () {
        if (process.browser) {
          window.__button = this
        }
      },
      async onFollowButtonClick (e) {
        e.preventDefault()
        e.stopPropagation()
        const {
          account,
          accountId,
          following,
          followRequested,
          blocking
        } = this.get()
        if (blocking) { // unblock
          await setAccountBlocked(accountId, false)
        } else { // follow/unfollow
          const newFollowingValue = !(following || followRequested)
          if (!account.locked) { // be optimistic, show the user that it succeeded
            this.set({ overrideFollowing: newFollowingValue })
          }
          if (newFollowingValue) {
            this.refs.icon.animate(FOLLOW_BUTTON_ANIMATION)
          }
          await setAccountFollowed(accountId, newFollowingValue)
        }
      }
    },
    store: () => store,
    data: () => ({
      overrideFollowing: undefined
    }),
    computed: {
      accountId: ({ account }) => account.id,
      following: ({ relationship, overrideFollowing }) => {
        if (typeof overrideFollowing === 'boolean') {
          return overrideFollowing
        }
        return relationship && relationship.following
      },
      blocking: ({ relationship }) => relationship && relationship.blocking,
      followRequested: ({ relationship }) => {
        return relationship && relationship.requested
      },
      requested: ({ following, followRequested }) => !following && followRequested,
      label: ({ blocking, requested }) => {
        if (blocking) {
          return 'intl.unblock'
        }
        return formatIntl('intl.followLabel', { requested })
      },
      pressedLabel: ({ requested }) => {
        return formatIntl('intl.unfollowLabel', { requested })
      },
      href: ({ blocking, following, followRequested }) => {
        if (blocking) {
          return '#fa-unlock'
        } else if (following) {
          return '#fa-user-times'
        } else if (followRequested) {
          return '#fa-hourglass'
        } else {
          return '#fa-user-plus'
        }
      },
      shown: ({ verifyCredentials, relationship }) => (
        verifyCredentials && relationship && verifyCredentials.id !== relationship.id
      ),
      pressable: ({ blocking }) => !blocking,
      pressed: ({ blocking, following, followRequested }) => (
        !blocking && (following || followRequested)
      )
    },
    components: {
      IconButton
    }
  }
</script>
